<template>
  <view class="record-container">
    <z-paging
      ref="paging"
      v-model="recordList"
      :default-page-size="20"
      :refresher-enabled="true"
      :loading-more-enabled="true"
      :refresher-default-text="useT('继续下拉刷新')"
      :refresher-pulling-text="useT('松开立即刷新')"
      :refresher-refreshing-text="useT('正在刷新.')"
      :empty-view-text="useT('暂无数据')"
      :loading-more-loading-text="useT('加载中.')"
      :loading-more-no-more-text="useT('没有更多了')"
      :refresher-complete-text="useT('刷新完成')"
      :loading-more-default-text="useT('点击加载更多')"
      :loading-more-fail-text="useT('加载失败，点击重新加载')"
      @query="queryList"
    >
      <template #top>
        <!-- 顶部导航栏 -->
        <u-navbar :border="false" bg-color="#fff" title-color="#333" :safe-area-inset-top="true" placeholder>
          <template #center>
            <text class="navbar-title">{{ useT('记录') }}</text>
          </template>
          <template #left>
            <u-icon name="arrow-left" size="20" color="#333" @click="goBack"></u-icon>
          </template>
        </u-navbar>
        <!-- tab标签 -->
        <view class="tabs-wrapper">
          <up-tabs :list="tabsList" :current="currentTab" :scrollable="false" @change="handleTabChange"></up-tabs>
        </view>
      </template>

      <!-- 页面内容 -->
      <view class="content">
        <!-- 提现记录列表 -->
        <view class="record-list">
          <view class="record-item" v-for="(record, index) in recordList" :key="record.id || index">
            <view class="record-left">
              <view class="record-icon" :class="getIconClass(record)">
                <u-icon :name="getIconName(record)" size="20" :color="getIconColor(record)"></u-icon>
              </view>
            </view>
            <view class="record-right">
              <view class="record-info">
                <text class="record-title">{{ useT(record.title) || useT('USDT提现') }}</text>
                <text class="record-time">{{ formatTime(record.add_time) }}</text>
                <!-- 提现记录显示的字段 -->
                <template v-if="currentTab === 0">
                  <text class="record-mark" v-if="record.mark">{{ record.mark }}</text>
                  <text class="record-fail-msg" v-if="record.fail_msg">{{ useT('失败原因') }}: {{ record.fail_msg }}</text>
                  <text class="record-order" v-if="record.wechat_order_id">{{ useT('订单号') }}: {{ record.wechat_order_id }}</text>
                </template>
                <!-- 交易记录显示的字段 -->
                <template v-else>
                  <text class="record-mark" v-if="record.mark">{{ useT(record.mark) }}</text>
                </template>
              </view>
              <view class="record-amount">
                <text class="amount-text" :class="getAmountClass(record)">
                  {{ getAmountText(record) }}
                </text>
                <text class="status-text" :class="getStatusClass(record)">
                  {{ getStatusText(record) }}
                </text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script setup>
import { getTransactionRecord, getWithdrawRecord } from '@/api/user';
import { useT } from '@/utils/i18n.js';
import { onShow } from '@dcloudio/uni-app';
import { onMounted, ref } from 'vue';

// 响应式数据
const recordList = ref([]);
const paging = ref(null);
const currentTab = ref(0);

// tab列表
const tabsList = ref([]);

onShow(() => {
  console.log('提现记录页面显示');
  uni.hideTabBar();
  tabsList.value = [{ name: useT('提现记录') }, { name: useT('交易记录') }];
});

// tab切换
const handleTabChange = ({ index }) => {
  currentTab.value = index;
  // 切换tab时重新加载数据
  if (paging.value) {
    paging.value.reload();
  }
};

// z-paging 查询方法
const queryList = (pageNum, pageSize) => {
  console.log(`加载第${pageNum}页，每页${pageSize}条数据`);

  const params = {
    page: pageNum,
    limit: pageSize
  };

  // 根据当前tab调用不同的接口
  if (currentTab.value === 0) {
    // 提现记录
    getWithdrawRecord(params)
      .then((res) => {
        console.log('提现记录数据:', res);
        if (res.status === 200) {
          const data = res.data.list || [];
          paging.value.complete(data);
        }
      })
      .catch((error) => {
        console.error('获取提现记录失败:', error);
        paging.value.complete([]);
      });
  } else {
    // 交易记录
    const transactionParams = {
      ...params,
      category: 'now_money'
    };
    getTransactionRecord(transactionParams)
      .then((res) => {
        console.log('交易记录数据:', res);
        if (res.status === 200) {
          // 交易记录接口返回的data直接是数组
          const data = Array.isArray(res.data) ? res.data : [];
          paging.value.complete(data);
        }
      })
      .catch((error) => {
        console.error('获取交易记录失败:', error);
        paging.value.complete([]);
      });
  }
};

const goBack = () => {
  uni.navigateBack();
};

const formatTime = (timeStr) => {
  if (!timeStr) return '';

  // 确保正确解析时间字符串，支持多种格式
  let date;
  if (timeStr.includes(' ')) {
    // 格式: "2025-10-19 21:42:45"
    date = new Date(timeStr.replace(/-/g, '/'));
  } else {
    date = new Date(timeStr);
  }

  // 检查日期是否有效
  if (isNaN(date.getTime())) {
    return timeStr; // 如果解析失败，返回原始字符串
  }

  return date.toLocaleString();
};

// 获取状态文本
const getStatusText = (record) => {
  // 交易记录的处理
  if (currentTab.value === 1) {
    // 交易记录：status=1表示成功，其他状态根据实际情况判断
    if (record.status === 1) {
      return useT('交易成功');
    }
    return useT('交易成功');
  }

  // 提现记录的处理
  // 如果是提现失败类型，直接显示失败
  if (record.type === 'extract_fail') {
    return useT('提现失败');
  }

  // 根据status判断状态
  const statusMap = {
    0: useT('待审核'),
    1: useT('审核通过'),
    2: useT('审核拒绝'),
    3: useT('已完成'),
    4: useT('已取消')
  };
  return statusMap[record.status] || useT('未知状态');
};

// 获取状态样式类
const getStatusClass = (record) => {
  // 如果是提现失败，显示失败样式
  if (record.type === 'extract_fail') {
    return 'status-failed';
  }

  const classMap = {
    0: 'status-pending',
    1: 'status-success',
    2: 'status-failed',
    3: 'status-completed',
    4: 'status-cancelled'
  };
  return classMap[record.status] || '';
};

// 获取金额文本
const getAmountText = (record) => {
  const amount = record.number || '0';

  // 交易记录的处理
  if (currentTab.value === 1) {
    // 交易记录：根据pm字段判断，pm=1表示收入，pm=0表示支出
    if (record.pm === 1) {
      return `+${amount}`;
    }
    return `-${amount}`;
  }

  // 提现记录的处理
  // 提现失败类型显示正数（退回），提现类型显示负数（支出）
  if (record.type === 'extract_fail') {
    return `+${amount}`;
  }
  return `-${amount}`;
};

// 获取金额样式类
const getAmountClass = (record) => {
  // 交易记录的处理
  if (currentTab.value === 1) {
    // 交易记录：根据pm字段判断，pm=1表示收入（绿色），pm=0表示支出（红色）
    if (record.pm === 1) {
      return 'amount-success';
    }
    return 'amount-out';
  }

  // 提现记录的处理
  if (record.type === 'extract_fail') {
    return 'amount-success';
  }
  return 'amount-out';
};

// 获取图标名称
const getIconName = (record) => {
  // 交易记录的处理
  if (currentTab.value === 1) {
    // 交易记录：pm=1表示收入（向上箭头），pm=0表示支出（向下箭头）
    if (record.pm === 1) {
      return 'arrow-up';
    }
    return 'arrow-down';
  }

  // 提现记录的处理
  if (record.type === 'extract_fail') {
    return 'close-circle';
  }
  return 'arrow-down';
};

// 获取图标颜色
const getIconColor = (record) => {
  // 交易记录的处理
  if (currentTab.value === 1) {
    // 交易记录：pm=1表示收入（绿色），pm=0表示支出（红色）
    if (record.pm === 1) {
      return '#12C284';
    }
    return '#FF6B6B';
  }

  // 提现记录的处理
  if (record.type === 'extract_fail') {
    return '#FF6B6B';
  }
  return '#12C284';
};

// 获取图标容器样式类
const getIconClass = (record) => {
  // 交易记录的处理
  if (currentTab.value === 1) {
    // 交易记录：pm=1表示收入（成功样式），pm=0表示支出（失败样式）
    if (record.pm === 1) {
      return 'icon-success';
    }
    return 'icon-fail';
  }

  // 提现记录的处理
  if (record.type === 'extract_fail') {
    return 'icon-fail';
  }
  return 'icon-success';
};

// 生命周期
onMounted(() => {
  console.log('提现记录页面加载完成');
});
</script>

<style lang="scss" scoped>
.record-container {
  min-height: 100vh;
  background-color: #f8f9fa;
}

// 导航栏标题
.navbar-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

// tabs样式
.tabs-wrapper {
  background-color: #ffffff;
  padding: 0 24rpx;
}

.content {
  padding: 0 24rpx;

  // 提现记录列表
  .record-list {
    .record-item {
      display: flex;
      background-color: #ffffff;
      border-radius: 16rpx;
      padding: 24rpx;
      margin-top: 16rpx;
      box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;

      &:active {
        transform: scale(0.98);
      }

      .record-left {
        margin-right: 24rpx;

        .record-icon {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          background-color: #fff5f5;
          display: flex;
          align-items: center;
          justify-content: center;

          &.icon-success {
            background-color: #e8f8f3;
          }

          &.icon-fail {
            background-color: #fff5f5;
          }
        }
      }

      .record-right {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;

        .record-info {
          flex: 1;

          .record-title {
            display: block;
            font-size: 32rpx;
            font-weight: 600;
            color: #333;
            margin-bottom: 8rpx;
            line-height: 1.3;
          }

          .record-time {
            display: block;
            font-size: 24rpx;
            color: #999;
            margin-bottom: 8rpx;
            line-height: 1.4;
          }

          .record-mark {
            display: block;
            font-size: 24rpx;
            color: #666;
            margin-top: 8rpx;
            line-height: 1.4;
          }

          .record-fail-msg {
            display: block;
            font-size: 22rpx;
            color: #ff6b6b;
            margin-top: 8rpx;
            line-height: 1.4;
          }

          .record-order {
            display: block;
            font-size: 22rpx;
            color: #999;
            margin-top: 8rpx;
            line-height: 1.2;
            word-break: break-all;
          }
        }

        .record-amount {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          margin-left: 16rpx;

          .amount-text {
            font-size: 32rpx;
            font-weight: 600;
            margin-bottom: 8rpx;
            line-height: 1;

            &.amount-out {
              color: #ff6b6b;
            }

            &.amount-success {
              color: #12c284;
            }
          }

          .status-text {
            font-size: 22rpx;
            padding: 4rpx 12rpx;
            border-radius: 8rpx;
            line-height: 1.2;

            &.status-pending {
              color: #ff9800;
              background-color: #fff3e0;
            }

            &.status-success {
              color: #12c284;
              background-color: #e8f8f3;
            }

            &.status-failed {
              color: #ff6b6b;
              background-color: #fff5f5;
            }

            &.status-completed {
              color: #12c284;
              background-color: #e8f8f3;
            }

            &.status-cancelled {
              color: #999;
              background-color: #f5f5f5;
            }
          }
        }
      }
    }
  }
}
</style>
